<template>
	<view class="write-off">
		<!-- 确认核销 -->
		<u-navbar leftIconSize="34rpx" @leftClick="Back" :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">核销</text>
			</view>
		</u-navbar>
		<view
			class="authentication-container w-750 b-box  po-re"
			style="padding: 0 24rpx;background-color: #F7F8F9;"
			:style="{ height: containerHeight }"
			v-if="datalist != ''"
		>
			<scroll-view scroll-y="true" :style="{ height: containerHeight }">
				<view class="b-box " style="padding-bottom: 70rpx;">
					<!-- 1 -->
					<view
						class="b-box bg-ff"
						style="width: 702rpx;min-height: 326rpx;border-radius: 16rpx;margin-top: 20rpx; padding:24rpx 24rpx 0"
					>
						<!-- img -->
						<view class="d-flex flex-r ali-i-s just-s b-box" style="min-height: 140rpx;">
							<view
								style="width: 140rpx;height: 140rpx;border-radius: 16rpx;overflow: hidden;margin-right: 24rpx;"
							>
								<image
									:src="datalist.catimage"
									style="width: 140rpx;height: 140rpx;"
									mode=""
								></image>
							</view>
							<view class="d-flex flex-c ali-i-s just-s">
								<text class="pf-sc fw-500 c-333" style="font-size: 30rpx;margin-bottom: 12rpx;">
									{{ datalist.catname }}
								</text>
								<view class="d-flex flex-r ali-i-c just-s">
									<text class="pf-sc fw-600 po-re" style="font-size: 18rpx;color: #FF5C00;top:4rpx">
										¥
									</text>
									<text class="pf-sc fw-600 " style="font-size: 28rpx;color: #FF5C00;">
										{{ datalist.money }}
									</text>
								</view>
							</view>
						</view>
						<!--  -->
						<view class="d-flex b-box flex-c ali-i-c just-c" style="min-height: 161rpx;">
							<view class="d-flex flex-r ali-i-c just-sw w-100" style="height: 78rpx;">
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">优惠券</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#FF5C00">
									￥{{ datalist.yhmoney }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 82rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">支付金额</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#FF5C00">
									￥{{ datalist.money }}
								</text>
							</view>
						</view>
					</view>
					<!-- 2 -->
					<view class="w-100 b-box d-flex flex-r ali-i-c just-s" style="margin:24rpx 0 16rpx;">
						<text class="fw-500 c-333 pf-sc" style="font-size: 30rpx;">订单信息</text>
					</view>
					<view
						class="b-box bg-ff"
						style="width: 702rpx;min-height: 326rpx;border-radius: 16rpx;margin-top: 20rpx; padding:24rpx 24rpx 0"
					>
						<!--  -->
						<view class="d-flex b-box flex-c ali-i-c just-c">
							<view class="d-flex flex-r ali-i-c just-sw w-100" style="height: 78rpx;">
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">车辆位置</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ datalist.caraddress }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">停靠位置</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ datalist.cardesc }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">车辆信息</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ datalist.cardetail }}/{{ datalist.serverlog[0].mobile }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">服务项目</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ datalist.catname }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">服务时间</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ datalist.servertime }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">备注信息</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ datalist.remarks }}
								</text>
							</view>
						</view>
					</view>
					<!--3  -->
					<view class="w-100 b-box d-flex flex-r ali-i-c just-s" style="margin:24rpx 0 16rpx;">
						<text class="fw-500 c-333 pf-sc" style="font-size: 30rpx;">其他信息</text>
					</view>
					<view
						class="b-box bg-ff"
						style="width: 702rpx;min-height: 242rpx;border-radius: 16rpx;margin-top: 20rpx; padding:24rpx 24rpx 0"
					>
						<!--  -->
						<view class="d-flex b-box flex-c ali-i-c just-c">
							<view class="d-flex flex-r ali-i-c just-sw w-100" style="height: 78rpx;">
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">订单编号</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ datalist.orderno }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">下单时间</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ datalist.createtime }}
								</text>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-sw w-100"
								style="height: 78rpx;border-top: 2rpx solid #eeeeee;"
							>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#666666">付款时间</text>
								<text class="pf-sc fw-400" style="font-size: 28rpx;color:#555555">
									{{ datalist.paytime_text }}
								</text>
							</view>
						</view>
					</view>
					<!-- 4 -->
					<view class="w-100 b-box" style="margin: 60rpx 0 0;">
						<u-button
							:throttleTime="700"
							@click="ConfirmWriteOff"
							:customStyle="{
								height: '88rpx',
								width: '670rpx',
								font: '500 32rpx PingFang SC',
								color: '#ffffff',
								background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
								borderRadius: '44rpx',
								borderWidth: '0rpx'
							}"
							shape="square"
							text="确认核销"
						></u-button>
					</view>
				</view>
			</scroll-view>
		</view>

		<custom-model
			:show="ModelShow"
			:top="'30rpx'"
			:confirmText="'查看订单'"
			:cancelText="'回到首页'"
			@cancel="ModelCancel"
			@confirm="ModelConfirm"
			:title="'核销成功'"
		/>
	</view>
</template>

<script>
import { hexiao, worderdetail } from '@/common/api.js';
import { _containerHeight } from '@/utils/GetSys.js';
import customModel from '../components/custom-model/custom-model.vue';
import Ubutton from '../components/uview-ui/components/u-button/u-button';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
export default {
	components: {
		'u-navbar': Unavbar,
		'u-button': Ubutton,
		customModel
	},
	data() {
		return {
			containerHeight: '',
			// ////////////提示框//////////////////
			ModelShow: false,
			id: '',
			datalist: ''
		};
	},
	methods: {
		ConfirmWriteOff() {
			//确认核销
			this.ModelShow = true;
		},
		getWokerOrder() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: this.id
			};
			worderdetail(params).then(res => {
				console.log(JSON.stringify(res), '订单详情');
				this.datalist = res.data.data;
			});
		},
		ModelCancel() {
			//回到首页
			this.ModelShow = false;
			uni.reLaunch({
				url: `/pages/UserHomePage/UserHomePage`
			});
		},
		ModelConfirm() {
			//查看订单
			this.ModelShow = false;
			// 跳转到订单模块
			uni.reLaunch({
				url: `/pages/CustomerService/CustomerService`
			});
		},
		Back() {
			uni.reLaunch({
				url: `/pages/UserHomePage/UserHomePage`
			});
		}
	},

	onLoad(options) {
		console.log(options.QRResult, '我是扫码来的id哈哈哈');
		this.containerHeight = _containerHeight();
		this.id = options.QRResult;
	},
	onShow() {
		this.getWokerOrder();
	}
};
</script>

<style lang="scss">
.write-off {
}
</style>
